What is the difference between put() and add() in IndexedDB?

Question

Rana Sunny · Answer

In IndexedDB, both put() and add() are used to store data in an object store, but they have
different behaviors when it comes to existing records.
add()
Adds a new record only if the key does not already exist.
Throws an error if a record with the same key already exists. Used when you want to
prevent overwriting existing data.
Example:
const request = objectStore.add({ id: 1, name: "Alice" }); // Fails if id 1 already exists
put()
Adds a new record or updates an existing record with the same key.
Overwrites if the key already exists. Used when you want to 
upsert (insert or update) data.
Example:
const request = objectStore.put({ id: 1, name: "Alice" }); // Adds if not exists, updates if exists
Summary Table
Feature
add()
put()
Add new record
Yes
Yes
Update existing
(throws error)
(replaces existing data)
Error on duplicate key
Yes
No
Use case
Prevent overwriting
Upsert behavior
Use Guidelines
Use add() when:
You want to ensure no duplicates.You're inserting new data only.
Use put() when:
You want to update or insert.You're okay with overwriting existing data.
and 
Here are code examples with error handling for both add() and
put() in IndexedDB:
Setup (for both examples)
const request = indexedDB.open("TestDB", 1);
request.onupgradeneeded = function (event) {
    const db = event.target.result;
    if (!db.objectStoreNames.contains("users")) {
        db.createObjectStore("users", { keyPath: "id" });
    }
};
Using add() (fails on duplicate key)
request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const store = transaction.objectStore("users");
    const user = { id: 1, name: "Alice" };
    const addRequest = store.add(user);
    addRequest.onsuccess = () =andgt; {
        console.log("User added successfully.");
    };
    addRequest.onerror = (event) =andgt; {
        console.error("Add failed:", event.target.error); // e.g., ConstraintError if id=1 exists
    };
};
Using put() (updates if exists)
request.onsuccess = function (event) {
    const db = event.target.result;
    const transaction = db.transaction("users", "readwrite");
    const store = transaction.objectStore("users");
    const user = { id: 1, name: "Alice Updated" };
    const putRequest = store.put(user);
    putRequest.onsuccess = () =andgt; {
        console.log("User added or updated successfully.");
    };
    putRequest.onerror = (event) =andgt; {
        console.error("Put failed:", event.target.error);
    };
};
Note:
In the add() example, trying to insert id: 1 again will cause a
ConstraintError.In the put() example, it will silently overwrite if
id: 1 already exists.

interview

What is the difference between put() and add() in IndexedDB?

Rana Sunny

Can you answer this question?

1 Answers

add()

Example:

put()

Example:

Summary Table

Use Guidelines

Setup (for both examples)

Using `add()` (fails on duplicate key)

Using `put()` (updates if exists)

Note:

Liked By

Feature	`add()`	`put()`
Add new record	Yes	Yes
Update existing	(throws error)	(replaces existing data)
Error on duplicate key	Yes	No
Use case	Prevent overwriting	Upsert behavior